<template>
  <div class="pageContent">
    <div class="tabsAll" v-loading="pageLoading" text="加载中">
      <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" @edit="handleTabsEdit">
        <el-tab-pane label="基本信息" :name="0">
          <BaseInfo :form-data="form.baseInfo" :qiniuToken="qiniuToken" @updateForm="updateForm"></BaseInfo>
        </el-tab-pane>
        <el-tab-pane label="认证信息" :name="1">
          <VerifyInfo :form-data="form.authInfo" :qiniuToken="qiniuToken" @updateForm="updateForm"></VerifyInfo>
        </el-tab-pane>
        <el-tab-pane label="线上相关设置" :name="2">
          <LineInfo ref="lineInfoRefs" :form-data="form.onlineInfo" :qiniuToken="qiniuToken" @updateForm="updateForm"></LineInfo>
        </el-tab-pane>
        <el-tab-pane label="其他设置" :name="3">
          <OtherInfo :form-data="form.otherInfo"></OtherInfo>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="bottomBtn">
      <el-button @click="back">返回</el-button>
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>

<script setup>
  import BaseInfo from './BaseInfo.vue'
  import VerifyInfo from './VerifyInfo.vue'
  import LineInfo from './LineInfo.vue'
  import OtherInfo from './OtherInfo.vue'
  import {
    ref,
    reactive,
    toRaw, onMounted, nextTick
  } from 'vue'
  import { create, updateBase, updateAuth, updateOnline, updateOther, details } from '@/api/user/doctor'
  import {useRoute, useRouter} from "vue-router";
  import {ElMessage} from "element-plus";
  import {token as qiniuTokenApi} from "@/api/common";

  const router = useRouter()
  const route = useRoute()
  const form = reactive({
    baseInfo: {
      doctor_type: 1
    },
    authInfo: {},
    onlineInfo: {},
    otherInfo: {},
  })
  if (route.query.id) {
    form.id = route.query.id
  }
  const qiniuToken = ref("")
  const lineInfoRefs = ref()
  const pageLoading = ref(false)

  /**
   * 提交form
   * @returns {Promise<void>}
   */
  const submitForm = async () => {
    if (editableTabsValue.value === 2) {
      lineInfoRefs.value.updateParentForm()
    }
    console.log(form)
    const options = JSON.parse(JSON.stringify(form))
    let res = null;
    if (editableTabsValue.value === 0) {
      if (form.id) {
        res = await updateBase(options)
        ElMessage.success("保存基本信息成功")
      } else {
        res = await create(options)
        ElMessage.success("新增基本信息成功")
        form.id = res.data.id
      }
    } else {
      if (form.id) {
        if (editableTabsValue.value === 1) {
          await updateAuth(options)
          ElMessage.success("保存认证信息成功")
        } else if (editableTabsValue.value === 2) {
          if (options.onlineInfo.doctor_disease) {
            options.onlineInfo.doctor_disease = options.onlineInfo.doctor_disease.join(",")
          }
          await updateOnline(options)
          ElMessage.success("保存线上相关信息成功")
        } else if (editableTabsValue.value === 3) {
          await updateOther(options)
          ElMessage.success("保存其他信息成功")
        }
      } else {
        ElMessage.error("请先提交基本信息")
      }
    }
  }

  /**
   * 子组件更新form
   * @param type 类型
   * @param key
   * @param value
   */
  const updateForm = (type, key, value) => {
    form[type][key] = value
  }

  /**
   * 获取详情
   * @returns {Promise<void>}
   */
  const getDetail = async () => {
    if (!form.id) {
      return
    }
    pageLoading.value = true
    const res = await details({ id: form.id })
    const _onlineInfo = res.data.onlineInfo
    _onlineInfo.doctor_disease = _onlineInfo.doctor_disease.map(item=>item.id)
    form.baseInfo = res.data.baseInfo
    form.authInfo = res.data.authInfo
    form.onlineInfo = _onlineInfo
    form.otherInfo = res.data.otherInfo
    pageLoading.value = false
    nextTick(()=>{
      lineInfoRefs.value.updatePharmacyList()
    })
  }

  const getQiniuToken = async () => {
    const res = await qiniuTokenApi()
    qiniuToken.value = res.data.upToken
  }

  const back = ()=> {
    router.go(-1)
  }

  const editableTabsValue = ref(2)

  onMounted(() => {
    getQiniuToken()
    getDetail()
  })
</script>

<style lang="scss" scoped>
  .tabsAll {
    padding: 15px;
  }

  .demo-tabs {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // border-bottom: 1px solid #eee;
  }

  .demo-tabs ::v-deep .el-tabs__content {
    width: 100%;
  }


  .custom-card {
    width: 100%;
    max-width: 1100px;
  }

  .buttonAll {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }

  .el-card {
    box-shadow: none;
  }

  .table-container {
    overflow-x: auto;
  }


  .demo-tabs {
    display: flex;
    justify-content: center;
    flex-direction: column;
    // align-items: center;
  }

  v-deep .el-tabs__content {
    width: 100%
  }
</style>
